#@layout()

#define main()

<div class="jfa-header-box" id="jfa-header-box">
    <div class="jfa-crumbs" id="jfa-crumbs">
        <a href="#(ctx)/admin/history">工艺参数历史查询</a> /#(remark??)曲线查看
    </div>
    #include("/_view/common/_header_right.html")
</div>
<div class="jfa-content-box" id="jfa-content-box">
    <div class="jfa-content" id="jfa-content">
        <div id="history" class="col-lg-12 margin-top-10" style="height:500px;"></div>
    </div>
</div>
<script type="text/javascript">

    var dom = document.getElementById("history");
    var historyChart = echarts.init(dom);
    var option   = {
        title : {
            text: '#(config.remark??)曲线',
            x:'center'
        },
        tooltip: {
            trigger: 'axis',
            formatter: "时间：{b} ,<br>参数值: {c}"
        },
        xAxis: {
            name:'时间',
            type: 'category',
            data: [ ]
        },
        yAxis: {
            name:'#(config.unit??)',
            type: 'value',
            axisLabel : {
                formatter: '{value}'
            },
            scale:true,
        },
        series: [
            {
                name:'#(config.unit??)',
                data: [],
                type: 'line',
                smooth:true,
                color:"#7cb5ec",
                itemStyle: {
                    normal: {
                        label: {
                                  show: false,
                                  position: 'top',
                                  textStyle: {
                                  color: 'black',
                                  fontSize: 16
                                  }
                         }
                    }
                }

            }
         ]
    };

    function search(){
        $.ajax({
          url:'#(ctx)/admin/history/getData',
          data:{
                tableName:"#(config.tableName??)",
                startTime:"#(startTime??)",
                endTime:"#(endTime??)",
                barcode:"#(barcode??)",
                rackNo:"#(rackNo??)"
          },
          dataType:'json',
          success:function(ret){
            if(ret.state=="ok"){
                var data=ret.data;
                option.series[0].data=[];
                option.xAxis.data=[]
                $(data).each(function(index , element){
                        var dataItem={};
                        dataItem.name=element.updatetime;
                        dataItem.value=element.paramvalue;
                        option.series[0].data.push(dataItem)
                        option.xAxis.data.push(element.updatetime.substring(11))
                })
                historyChart.setOption(option, true);
                historyChart.resize()
            }else{
               layer.msg(ret.msg);
            }
          }
        })
    }
    search();
</script>
#end



#define js()
<script src="#(ctx)/assets/echarts/echarts.min.js"></script>
<script src="#(ctx)/assets/My97DatePicker/WdatePicker.js"></script>
#end

#define css()
<style>

.time{
background: #fff url(#(ctx)/assets/My97DatePicker/skin/datePicker.gif) no-repeat right;
}
</style>
#end

